<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
</head>
<body>
    <button id="b1" onclick="s1()">1</button>
    <button id="b2" onclick="s2()">2</button>
    <button id="b3" onclick="s3()">3</button>
    <button id="b4" onclick="s4()">4</button>
    <button id="b5" onclick="s5()">5</button>
    <button onclick="big()">放大</button>
    <button onclick="small()">缩小</button>
    <button onclick="zhuan()">旋转</button>
    <input type="button" value="上一张" onclick="pre();">
    <input type="button" value="下一张" onclick="next();">
    <hr />
    <img id="pic" style="transition: all 1s" src="d0401.jpg" width="400"  />
    <script>
        var deg = 0;
        function zhuan(){
            deg += 90;
            pic.style.transform = "rotate("+deg+"deg)";
        }
        function big() {
            if(pic.width<500)
            pic.width = pic.width * 1.2;
        }
        function small() {
            if (pic.width>300)
            pic.width = pic.width * 0.8;
        }
        function s2() {
            pic.src = "d0402.jpg";
            b1.style.color = "";
            b2.style.color = "red";
            b3.style.color = "";
            b4.style.color = "";
            b5.style.color = "";
        }
        function s3() {
            pic.src = "d0403.jpg";

            b1.style.color = "";
            b2.style.color = "";
            b3.style.color = "red";
            b4.style.color = "";
            b5.style.color = "";
        }
        function s4() {
            pic.src = "d0404.jpg";
            b1.style.color = "";
            b2.style.color = "";
            b3.style.color = "";
            b4.style.color = "red";
            b5.style.color = "";
        }
        function s5() {
            pic.src = "d0405.jpg";
            b1.style.color = "";
            b2.style.color = "";
            b3.style.color = "";
            b4.style.color = "";
            b5.style.color = "red";
        }
        function s1() {
            pic.src = "d0401.jpg";
            b1.style.color = "red";
            b2.style.color = "";
            b3.style.color = "";
            b4.style.color = "";
            b5.style.color = "";
        }

        var picArr=["d0401.jpg","d0402.jpg","d0403.jpg","d0404.jpg"];
        var index=0;
        function next(){
            index++;
            if(index==picArr.length){
                index=0;
            }
            document.getElementById("pic").src=picArr[index];
        }
        function pre(){
            index--;
            if(index<0){
                index=picArr.length-1;
            }
            document.getElementById("pic").src=picArr[index];
        }

    </script>
</body>
</html>